<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>工程施工实时监控系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!--<link rel="stylesheet" href="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.css">-->

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <!--<script src="${pageContext.request.contextPath}/${pageContext.request.contextPath}/${pageContext.request.contextPath}/plugins/timepicker/bootstrap-timepicker.min.js"></script>-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css" media="all">
    <style>
        .content {
            padding-bottom: 25px;
        }

        /*使layui数据表格的checkbox居中*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }

        .layui-form-item {
            height: 40px;
        }

        .layui-form-label {
            width: 100px;
        }

        .mylabel {
            font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            width: 50px;
        }

        /*删格化5等份*/
        .layui-col-lg2-4, .layui-col-md2-4, .layui-col-sm2-4, .layui-col-xs2-4 {
            position: relative;
            display: block;
            box-sizing: border-box
        }

        .layui-col-xs2-4 {
            float: left
        }

        .layui-col-xs2-4 {
            width: 19.9999992%
        }

        .layui-col-xs-offset2-4 {
            margin-left: 19.9999992%
        }

        @media screen and (min-width: 768px) {
            .layui-col-sm2-4 {
                float: left
            }

            .layui-col-sm2-4 {
                width: 19.9999992%
            }

            .layui-col-sm-offset2-4 {
                margin-left: 19.9999992%
            }
        }

        @media screen and (min-width: 992px) {
            .layui-col-md2-4 {
                float: left
            }

            .layui-col-md2-4 {
                width: 19.9999992%
            }

            .layui-col-md-offset2-4 {
                margin-left: 19.9999992%
            }
        }

        @media screen and (min-width: 1200px) {
            .layui-col-lg2-4 {
                float: left
            }

            .layui-col-lg2-4 {
                width: 19.9999992%
            }

            .layui-col-lg-offset2-4 {
                margin-left: 19.9999992%
            }
        }

        /*半圆*/
        .semicircle {
            border-bottom-left-radius: 125px;
            border-top-left-radius: 125px;
            width: 100%;
            height: 20px;
            background: #dadada;
            text-align: center;
            line-height: 20px;
            /*   padding: 50px;
               margin: 50px;*/
        }

        /*阴影*/
        .shadow:hover {
            -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;
            cursor: pointer; /*鼠标变成手指样式*/
        }

        .layui-laypage span {
            background-color: #ECF0F5;
        }

        .layui-laypage button {
            margin-right: 1000px;
        }

        /*分页插件靠左*/
        .layui-laypage {
            float: left;
        }
    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">
    <security:authentication property="principal.id" var="id"
    ></security:authentication>
    <!-- 页面头部 -->
    <jsp:include page="header.jsp"></jsp:include>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="aside.jsp"></jsp:include>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                设备管理
                <%--<small>数据列表</small>--%>
            </h1>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/pages/main.jsp"><i class="fa fa-dashboard"></i> 首页</a>
                </li>
                <li class="active">设备管理</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <!-- .box-body -->
            <div class="box box-primary">


            </div>
            <div class="demoTable">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" id="resetForm">
                    <security:authorize access="hasAnyRole('ROLE_SUPER_ADMIN,ROLE_ADMIN')">
                        <div class="layui-inline">
                            <select name="projectId" id="projectId" lay-filter="projectId">
                                <option value="">请选择项目</option>
                            </select>
                        </div>
                        <div class="layui-inline" id="sectionSel">
                            <select name="sectionId" id="sectionId" lay-filter="sectionId">
                                <option value="">请选择标段</option>
                            </select>
                        </div>
                    </security:authorize>
                    <%--  <div class="layui-inline">
                          <input class="layui-input" autocomplete="off" name="name" id="name"
                                 placeholder="请输入设备编号">
                      </div>--%>

                    <div class="layui-input-inline" style="width: 100px;margin: 0px;">
                        <select name="condition" id="condition" lay-filter="condition">
                            <option value="0">设备编号</option>
                            <option value="1">机器号</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" id="inp" name="inp"
                               autocomplete="off" placeholder="请输入编号"
                               class="layui-input">
                    </div>


                    <div class="layui-btn" id="reload"><i class="layui-icon layui-icon-search"></i></div>

                    <div class="layui-btn" id="reset">重置</div>

                    <div class="layui-input-inline" style="width: 90px;margin: 0px;">
                        <select name="state" id="state" lay-filter="state">
                            <option value="">筛选</option>
                            <option value="0">未激活</option>
                            <option value="1">已离线</option>
                            <option value="2">已离场</option>
                            <option value="3">运行中</option>
                            <option value="4">故障中</option>
                        </select>
                    </div>
                    <%--</div>--%>
                </div>
            </div>
            <%--   <table class="layui-hide" id="deviceMonitoringTable" lay-filter="deviceMonitoringTable">

               </table>--%>

            <div>
                <%-- <div class="layui-row layui-col-space15" id="newList" style="margin-top: 10px">
                 </div>--%>
                <div class="layui-row layui-col-space15" id="newList" style="margin-top: 10px">

                </div>

            </div>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
            </script>
            <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- @@close -->
    <!-- 内容区域 /-->


</div>

<script src="${pageContext.request.contextPath}/plugins/layui/layui.js" charset="utf-8"></script>

<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>

<script>


    //主体表格
    layui.use(['form', 'layer', 'element', 'laypage'], function () {
        var form = layui.form;
        var element = layui.element;
        var laypage = layui.laypage;
        var id = "${id}";

        $(function () {
            initLayPage();
        });


        //表格重载
        $("#reload").click(function () {
            initLayPage();
        })


        /* table.render({
             elem: '#deviceMonitoringTable'
             , url: '/deviceMonitoring/findAll.do'
             , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
             , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                 title: '提示'
                 , layEvent: 'LAYTABLE_TIPS'
                 , icon: 'layui-icon-refresh'
             }],
             skin: 'nob'//样式格式
             ,
             where: {
                 userId: id
             }
             , method: 'post'
             // , totalRow: true 合计行
             , title: '设备列表'
             , cols: [[
                 {type: 'checkbox', fixed: 'left'},
                 {title: '序号', align: 'center', type: 'numbers'}
                 , {
                     field: 'devName',
                     title: '设备名称',
                     width: '14%',
                     edit: 'text',
                     align: "center"
                 }
                 , {field: 'devNum', title: '设备编号', width: '16%', edit: 'text', align: "center"}
                 , {field: 'machineNum', title: '机器编号', width: '12%', edit: 'text', align: "center"}
                 , {
                     field: 'schedule',
                     title: '形象进度',
                     width: '18%',
                     edit: 'text',
                     align: "center",
                     templet: function (item) {
                         return '<div class="layui-progress layui-progress-big" lay-showPercent="yes">\n' +
                             '  <div class="layui-progress-bar layui-bg-blue" lay-percent="' + item.schedule + '%"></div>\n' +
                             '</div>';
                     }
                 }
                 , {field: 'pileMark', title: '当前作业', width: '14%', edit: 'text', align: "center"}
                 , {
                     field: 'state', title: '状态', width: '12%', edit: 'text', align: "center", templet: function (item) {
                         if (item.state == '0') {
                             return "未激活";
                         } else if (item.state == '1') {
                             return "已离线";
                         } else if (item.state == '2') {
                             return "已离场";
                         } else if (item.state == '3') {
                             return "运行中";
                         } else if (item.state == '4') {
                             return "故障中";
                         }
                     }
                 }
                 , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: '4.2%'}
             ]],
             done: function (res, curr, count) {
                 $("table").css("width", "100%");
                 //这里设置表格的宽度为100%
                 //!***重点***：table渲染完成后渲染element进度条
                 element.render();

             },
             page: true
             ,
             id: 'testReload'
         });*/
        //条件查询重载表格
        /*      var $ = layui.$, active = {
                  reload: function () {
                      var sectionId = $("#sectionId");
                      var projectId = $("#projectId");
                      var condition = $('#condition');
                      var inp = $('#inp');
                      var state = $('#state');
                      //执行重载
                      table.reload('testReload', {
                          page: {
                              curr: 1 //重新从第 1 页开始
                          }
                          , where: {
                              // key: {
                              userId: id,
                              projectId: projectId.val(),
                              sectionId: sectionId.val(),
                              condition: condition.val(),
                              inp: inp.val(),
                              state: state.val()

                              // }
                          }
                      }, 'data');
                  }
              };
              $('.demoTable .layui-btn').on('click', function () {
                  var type = $(this).data('type');
                  active[type] ? active[type].call(this) : '';
              });*/
        //头工具栏事件
        /*        table.on('toolbar(deviceMonitoringTable)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            $(".layui-laypage-btn").click();
                            break;
                    }
                });*/
        //重置
        $('#reset').on('click', function () {
            $(':input', '#resetForm')
                .not(":button", ":reset", "hidden", "submit")
                .val("")
                .removeAttr("checked")
                .removeAttr("selected");
            $("#condition option:first").prop("selected", 'selected');
            form.render('select');
            //执行重载
            initLayPage();

        });


        function initLayPage(pageSize, currentPage) {
            if (!pageSize || !currentPage) {
                pageSize = 10;
                currentPage = 1;
            }
            var sectionId = $("#sectionId");
            var projectId = $("#projectId");
            var condition = $("#condition");
            var inp = $("#inp");
            var state = $('#state');
            $.post("/deviceMonitoring/findAll.do", {
                page: currentPage,
                limit: pageSize,
                userId: id,
                sectionId: sectionId.val(),
                projectId: projectId.val(),
                condition: condition.val(),
                inp: inp.val(),
                state: state.val()
            }, function (result) {
                setHtml(result.data.list);
                laypage.render({
                    elem: 'test1',
                    count: result.data.total,
                    curr: currentPage,
                    limit: pageSize
                    , skin: '#ECF0F5', //皮肤
                    // theme: '#ECF0F5',
                    first: "首页",
                    last: "尾页",
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    jump: function (obj, first) {
                        if (!first) {
                            currentPage = obj.curr;
                            pageSize = obj.limit;
                            initLayPage(pageSize, currentPage);
                        }
                    }
                });
                element.render();
            });
        }

        //--------------------------------写入后台内容
        function setHtml(data) {
            // console.log(data);
            var strHtml = "";
            $.each(data, function (index, item) {
                // console.log(item.state);
                <%--strHtml += ('<li>${item.Title}</li>');--%>
                strHtml += '<div class="layui-col-lg2-4 layui-col-md2-4 layui-col-sm2-4 layui-col-xs2-4 myclass" >' +
                    '<div  style="display:none">' + item.state + '</div>' +
                    '                        <div class="layui-card shadow" style="height: 30%;padding-left: 20px" >' +
                    '                            <div class="layui-col-md12">' +
                    '                                <div class="layui-card " style="height: 16%">' +
                    '                                    <div class="layui-col-md10"' +
                    '                                         style="margin-top: 10px;font-weight: 700;font-size: 16px;color: #333;">' +
                    '                                        ' + item.devName + '(' + state(item.state) + ')' +
                    '                                    </div>' +
                    '                                    <div class="layui-col-md2" style="margin-top: 10px;margin-right: 0px">' +
                    '                                        <div class="semicircle">' +
                    '                                            <span style="color: #fff;">' + state(item.state) + '</span>' +
                    '                                        </div>' +
                    '                                    </div>' +
                    '                                </div>' +
                    '                            </div>' +
                    '                            <div class="layui-col-md12">' +
                    '                                <span style="color: #999;font-size: 12px;">设备编号' + item.devNum + '</span>' +
                    '                            </div>' +
                    '                            <div class="layui-col-md12">' +
                    '                                <span style="color: #999;font-size: 12px;">机器编号：' + item.machineNum + '</span>' +
                    '                            </div>' +
                    '                            <div class="layui-col-md5" style="margin-top: 20px">' +
                    '                                <img src="/img/dazhuangji2.png">' +
                    '                            </div>' +
                    '                            <div class="layui-col-md7" style="margin-top: 50px;padding-left: 20px">' +
                    '                                <div class="layui-col-md12" style="padding-bottom:5px">' +
                    '                                    当前作业' +
                    '                                </div>' +
                    '                                <div class="layui-col-md12" style="padding-bottom:15px">' +
                    '                                    <span>' + item.pileMark + '</span>' +
                    '                                </div>' +
                    '                                <div class="layui-col-md12" style="padding-bottom:15px">' +
                    '                                    形象进度' +
                    '                                </div>' +
                    '                                <div class="layui-col-md12">' +
                    '                                    <div class="layui-progress" lay-showPercent="yes" style="width: 80%">' +
                    '                                        <div class="layui-progress-bar layui-bg-blue" lay-percent="' + item.schedule + '%"></div>' +
                    '                                    </div>' +
                    '                                </div>' +
                    '                            </div>' +
                    '                        </div>' +
                    '                    </div>'
            });
            // document.getElementById('newsList').innerHTML = strHtml;
            if (data) {
                strHtml += '  <div id="test1" style="text-align: left;"></div>';
            }
            $("#newList").html(strHtml);
        }

        //--------------------------------状态码转化
        function state(obj) {
            if (obj == 0) {
                return '未激活';
            } else if (obj == 1) {
                return '已离线';
            } else if (obj == 2) {
                return '已离场';
            } else if (obj == 3) {
                return '运行中';
            } else if (obj == 4) {
                return '故障中';
            }
        }

        /*  $     consol(".myclass").on('click',function(){
         e.log(123)
          });*/
        $("#newList").on('click', '.myclass', function () {
            var str = $(this).children().children().eq(1).children().text();
            var device_code = str.substring(4);
            var state = $(this).children().eq(0).text();
            var device = {
                device_code: device_code,
                state: state
            }
            layer.open({
                type: 2,
                // title: '详细信息',
                maxmin: true,
                skin: 'layui-layer-lan',
                shadeClose: true, //点击遮罩关闭层
                area: ['1400px', '800px'],
                content: 'device-monitoring-details.jsp', //弹框显示的url,对应的页面
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];
                    // 向子页面的全局函数child传参
                    iframe.child(device);
                }
            })
        });

        //监听筛选条件框事件
        form.on('select(state)', function (obj) {
            initLayPage();
        });
        //监听搜索条件select框
        form.on('select(condition)', function (obj) {
            if (obj.value === "0") {
                $("#inp").attr("placeholder", "请输入编号");
            } else if (obj.value === "1") {
                $("#inp").attr("placeholder", "请输入机器号");
            }
        })

        //搜索框下拉框联动
        form.on('select(projectId)', function (obj) {
            $.ajax({
                type: "get",
                url: "/section/sectionGroupName.do",
                data: {
                    projectId: obj.value,
                    userId: id
                },
                success: function (Data) {
                    // console.log(Data)
                    var section = $("#sectionSel");
                    var html = "";
                    html += '<select name="sectionId" id="sectionId" lay-filter="sectionId">';
                    html += '<option value="" >请选择标段</option>';

                    for (var i = 0; i < Data.length; i++) {
                        // console.log(Data[1])
                        html += '<option value="' + Data[i].id + '">' + Data[i].sectionName + '</option>';
                    }
                    html += '</select>';
                    section.html(html);
                    form.render('select');
                }
            });
        });

        //监听行工具事件
        /*      table.on('tool(deviceMonitoringTable)', function (obj) {
                  var data = obj.data;

                  if (obj.event === 'edit') {
                      layer.open({
                          type: 2,
                          // title: '详细信息',
                          maxmin: true,
                          skin: 'layui-layer-lan',
                          shadeClose: true, //点击遮罩关闭层
                          area: ['1400px', '800px'],
                          content: 'device-monitoring-details.jsp', //弹框显示的url,对应的页面
                          success: function (layero, index) {
                              var iframe = window['layui-layer-iframe' + index];
                              // 向子页面的全局函数child传参
                              iframe.child(data);
                          }
                      })
                  }
              });*/
    });

    /*  $(document).ready(function () {
        // 选择框
          $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
                locale: 'zh-CN'
            });
    });*/

    //页面初始化
    layui.use('form', function () {
        var form = layui.form;
        var id = "${id}";
        var arr = [];
        //获取标段列表
        $.ajax({
            type: "get",
            url: "/section/sectionGroupNameByUserId.do",
            data: {
                userId: id
            },
            success: function (Data) {
                // console.log(Data)
                var section = $("#sectionId");
                var html = "";

                for (var i = 0; i < Data.length; i++) {
                    html += '<option value="' + Data[i].id + '">' + Data[i].sectionName + '</option>';
                    arr.push(Data[i].project_id)
                }
                section.append(html);
                form.render('select');
                //获取项目列表
                $.ajax({
                    type: "get",
                    url: "/project/projectGroupName.do",
                    traditional: true,//这条必须加上，否则传不了数组
                    data: {
                        projectIds: arr
                    },
                    success: function (Data) {
                        // console.log(Data)
                        var project = $("#projectId");
                        var html = "";
                        for (var i = 0; i < Data.length; i++) {
                            html += '<option value="' + Data[i].id + '">' + Data[i].projectName + '</option>';
                        }
                        project.append(html);
                        form.render('select');
                    }
                });
            }
        });


    })

    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }

    /*     $(document).ready(function () {

             // 激活导航位置
             setSidebarActive("admin-datalist");

             // 列表按钮
             $("#dataList td input[type='checkbox']").iCheck({
                 checkboxClass: 'icheckbox_square-blue',
                 increaseArea: '20%'
             });
             // 全选操作
             $("#selall").click(function () {
                 var clicks = $(this).is(':checked');
                 if (!clicks) {
                     $("#dataList td input[type='checkbox']").iCheck("uncheck");
                 } else {
                     $("#dataList td input[type='checkbox']").iCheck("check");
                 }
                 $(this).data("clicks", !clicks);
             });

         });*/

</script>
</body>

</html>
